import React, {CSSProperties, Fragment, useState} from "react";
import {Avatar, Button, ConfigProvider, Modal, Space, Table, Tag} from "antd";
import * as echarts from 'echarts';
import './style.scss'
import {AntDesignOutlined} from "@ant-design/icons";
import {ColumnsType} from "antd/es/table";
import {ModalProps} from "antd/es/modal/interface";
import {TableProps as RcTableProps} from "rc-table/lib/Table";
type EChartsOption = echarts.EChartsOption;




export default function ShowDataList() {


	interface DataType {
		key: string;
		name: string;
		age: number;
		address: string;
		tags: string[];
	}

	//定义表格头部
	const columns: ColumnsType<DataType> = [
		{
			width:1,
			title: 'Name',
			dataIndex: 'name',
			key: 'name',
			render: (text) => <a>{text}</a>,
		},
		{
			width:1,
			title: 'Age',
			dataIndex: 'age',
			key: 'age',
		},
		{
			width:1,
			title: 'Address',
			dataIndex: 'address',
			key: 'address',
		},
		{
			width:1,
			title: 'Tags',
			key: 'tags',
			dataIndex: 'tags',
			render: (_: any, {tags}: any) => (
				<>
					<div>aa</div>
				</>
			),
		},
		{
			width:1,
			title: 'Action',
			key: 'action',
			render: (_:any, record:any) => (
				<Space size="middle">
					<a>Delete</a>
				</Space>
			),
		},
	];

	//定义数据
	const data: DataType[] = [
		{
			key: '1',
			name: 'John Brown',
			age: 32,
			address: 'New York',
			tags: ['nice'],
		},
		{
			key: '1',
			name: 'John Brown',
			age: 32,
			address: 'New York',
			tags: ['nice'],
		},
		{
			key: '1',
			name: 'John Brown',
			age: 32,
			address: 'New York',
			tags: ['nice'],
		},
		{
			key: '1',
			name: 'John Brown',
			age: 32,
			address: 'New York No',
			tags: ['nice'],
		},
		{
			key: '1',
			name: 'John Brown',
			age: 32,
			address: 'New York',
			tags: ['nice'],
		},
		{
			key: '1',
			name: 'John Brown',
			age: 32,
			address: 'New ',
			tags: ['nice'],
		},
		{
			key: '1',
			name: 'John Brown',
			age: 32,
			address: 'New York ',
			tags: ['nice'],
		},
		{
			key: '1',
			name: 'John Brown',
			age: 32,
			address: 'New York',
			tags: ['nice'],
		},
		{
			key: '1',
			name: 'John Brown',
			age: 32,
			address: 'New York ',
			tags: ['nice'],
		},
		{
			key: '1',
			name: 'John Brown',
			age: 32,
			address: 'New York ',
			tags: ['nice'],
		},
		{
			key: '1',
			name: 'John Brown',
			age: 32,
			address: 'New York',
			tags: ['nice'],
		},
		{
			key: '2',
			name: 'Jim Green',
			age: 42,
			address: 'London ',
			tags: ['loser'],
		},
		{
			key: '3',
			name: 'Joe Black',
			age: 32,
			address: 'Sydney ',
			tags: ['cool'],
		},
	];




	const [isModalOpen, setIsModalOpen] = useState(false);

	const showModal = () => {
		setIsModalOpen(true);
	};

	const handleOk = () => {
		setIsModalOpen(false);
	};

	const handleCancel = () => {
		setIsModalOpen(false);
	};

	const onOpen=(open:boolean)=>{
		if(open){

			let chartDom = document.getElementById('container')!;
			let myChart = echarts.init(chartDom);
			let option: EChartsOption;

			option = {
				title: {
					text: '历史走势'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: 'Email',
						type: 'line',
						stack: 'Total',
						data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
						name: 'Union Ads',
						type: 'line',
						stack: 'Total',
						data: [220, 182, 191, 234, 290, 330, 310]
					},
					{
						name: 'Video Ads',
						type: 'line',
						stack: 'Total',
						data: [150, 232, 201, 154, 190, 330, 410]
					},
					{
						name: 'Direct',
						type: 'line',
						stack: 'Total',
						data: [320, 332, 301, 334, 390, 330, 320]
					},
					{
						name: 'Search Engine',
						type: 'line',
						stack: 'Total',
						data: [820, 932, 901, 934, 1290, 1330, 1320]
					}
				]
			};

			option && myChart.setOption(option);

		}

	}

	//弹框表格滚动
	const scroll: { x?: number | string; y?: number | string } = {
		y:450
	};
	//自定义样式
	const styles :{header?: CSSProperties, body?: CSSProperties, footer?: CSSProperties, mask?: CSSProperties}={
		header:{
			display:"flex",
			justifyContent:'center'
		}
	}
	const items = ['Item 1', 'Item 2', 'Item 3'];
	const title:string="12-26 18:20 活塞vs公牛历史数据趋势"

	return (
		<>
				<Button type={'default'} style={{backgroundColor:'red'}} onClick={showModal}>
					Open Modal
				</Button>

			<Modal width={'85%'}  open={isModalOpen} onOk={handleOk} onCancel={handleCancel} afterOpenChange={onOpen}
				   footer={null}
				   styles={styles}
				   title={<>
				   <div >
					   {title}
				   </div>
				   </>}

			>
				<div className={'container-root'}>
					<div className={'old-data-list'}>
						<Table bordered={true} columns={columns} dataSource={data} scroll={scroll} pagination={false}/>

					</div>
					<div className={'view-chart'}>
						<div  id="container" className={'container'} >
						</div>
					</div>
				</div>
			</Modal>
			<ul>
				{items.map((item, index) => (
					<>
						<li>{item}</li>
						<li>Additional Info</li>
					</>


				))}
			</ul>
		</>
	);
}